<template>
  <div class="max-w-6xl mx-auto p-6 min-h-screen bg-gradient-to-br from-slate-50 to-emerald-50">
    
    <!-- 页面标题 -->
    <div class="text-center mb-8 p-8 bg-white rounded-2xl shadow-lg">
      <h2 class="flex items-center justify-center gap-3 text-3xl font-semibold text-gray-800 mb-2">
        <n-icon class="text-4xl text-emerald-500" :component="ClipboardCheckIcon" />
        发展对象预审编辑
      </h2>
      <p class="text-gray-600">请完善发展对象预审信息</p>
    </div>

    <!-- 提示信息模块 -->
    <div class="mb-6 bg-gradient-to-r from-emerald-50 to-green-50 border border-emerald-200 rounded-2xl p-6 shadow-sm">
      <div class="flex items-center gap-3 mb-4">
        <n-icon class="text-2xl text-emerald-600" :component="InfoIcon" />
        <h3 class="text-lg font-semibold text-emerald-800">重要提示信息</h3>
      </div>
      <div class="space-y-2">
        <div v-for="(tip, index) in tipMessages" :key="index" class="flex items-start gap-3 text-sm text-emerald-700">
          <div class="flex-shrink-0 w-1.5 h-1.5 bg-emerald-500 rounded-full mt-2"></div>
          <span>{{ tip }}</span>
        </div>
      </div>
    </div>

    <n-form ref="formRef" :model="formValue" label-placement="top" label-align="left" label-width="auto">
      
      <!-- 发展对象预审信息卡片 -->
      <n-card class="mb-6 rounded-2xl border-0 shadow-lg bg-white overflow-hidden" title="" :bordered="false">
        <template #header>
          <div class="flex items-center gap-3 py-2">
            <n-icon class="text-xl text-emerald-500" :component="ClipboardCheckIcon" />
            <span class="text-lg font-semibold text-gray-800">发展对象预审信息</span>
          </div>
        </template>

        <n-grid :cols="12" :x-gap="16" :y-gap="12">
          <n-gi :span="6">
            <n-form-item label="预审落款时间" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-date-picker 
                v-model:formatted-value="formValue.developmentTargetPrereview.signatureDate" 
                value-format="yyyy-MM-dd" 
                type="date" 
                placeholder="请选择预审落款时间"
                style="width: 100%"
                class="rounded-lg"
                size="large"
              />
            </n-form-item>
          </n-gi>
        </n-grid>

        <div class="mt-6 p-4 bg-slate-50 rounded-xl border border-slate-200">
          <div class="flex items-center gap-2 text-slate-600 mb-2">
            <n-icon :component="InformationCircleOutlineIcon" />
            <span class="text-sm font-medium">说明</span>
          </div>
          <p class="text-sm text-slate-500">
            发展对象预审落款时间应为预审通过的正式日期，格式为YYYY-MM-DD。
          </p>
        </div>
      </n-card>

    </n-form>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import {
  NForm, NFormItem, NGrid, NGi, NDatePicker, NCard, NIcon
} from 'naive-ui'
import { 
  ClipboardOutline as ClipboardCheckIcon,
  InformationCircle as InfoIcon,
  InformationCircleOutline as InformationCircleOutlineIcon
} from '@vicons/ionicons5'

const props = defineProps({
  member: {
    type: Object,
    required: true
  }
})

const formRef = ref(null)

// 初始化数据
const initializeData = (memberData) => {
  // 确保developmentTargetPrereview对象存在
  if (!memberData.developmentTargetPrereview) {
    memberData.developmentTargetPrereview = {
      signatureDate: null
    }
  }
  return memberData
}

const formValue = ref(initializeData({...props.member}))

// 提示信息配置
const tipMessages = ref([
  '发展对象预审落款时间应为预审通过的正式日期',
  '预审日期格式为YYYY-MM-DD',
  '请确保时间的准确性，与预审会议记录保持一致',
  '预审通过后应及时填写落款时间',
  '落款时间一经确定不可随意更改'
])

onMounted(() => {
  // 可以在这里添加额外的初始化逻辑
})

watch(() => props.member, (newVal) => {
  formValue.value = initializeData({...newVal})
})

defineExpose({
  getEditedData: () => {
    // 直接返回 developmentTargetPrereview 对象，而不是整个 formValue
    return formValue.value.developmentTargetPrereview;
  }
})
</script>